<script>
export default {
  name: "good",
  props: {
    good: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleRadioChange(good) {
      this.$emit("radioChange", good)
    },
    goGoodsDetail() {
      uni.navigateTo({url: `/subPackages/detail/detail?goods_id=${this.good.goods_id}`})
    }
  },
}
</script>

<template>
  <view class="good">
    <view class="radioBox">
      <radio :checked="good.goods_state" color="#c00000" borderColor="#c00000" @click="handleRadioChange(good)"></radio>
    </view>
    <view class="right">
      <view class="img">
        <image :src="good.goods_small_logo"></image>
      </view>
      <view class="detail">
        <view class="name" @click="goGoodsDetail">{{ good.goods_name }}</view>
        <view class="info">
          <text class="price">￥{{ good.goods_price.toFixed(2) }}</text>
          <slot :good="good"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.good {
  width: 100%;
  height: 180rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f7f7f7;
  box-sizing: border-box;
  padding: 10rpx;

  .radioBox {

  }

  .right {
    flex: 1;
    display: flex;
    .img {
      width: 150rpx;
      height: 150rpx;
      margin-right: 18rpx;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 20rpx;
      }
    }

    .detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .name {
        font-size: 25rpx;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-size: 30rpx;
          color: #c00000;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
